<template>
  <div class="flex flex-wrap items-end gap-4">
    <BaseAvatar
      text="CT"
      size="xs"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="sm"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="md"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="lg"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="2xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="3xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />

    <BaseAvatar
      text="CT"
      size="4xl"
      badge-src="/img/icons/flags/united-states-of-america.svg"
      shape="curved"
      class="bg-muted-200 dark:bg-muted-600 text-muted-800 dark:text-muted-300"
    />
  </div>
</template>
